<!-- 申请管理对话框 -->
<template>
    <el-dialog v-model="dialogFormVisible" title="审核申请信息" width="40%">
        <el-form :model="applyForm" :rules="rules" ref="applyForms">
            <el-form-item prop="reviewStatus" label="审核状态" :label-width="formLabelWidth">
                <el-select v-model="value" placeholder="请选择状态" style="width: 200px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item prop="reviewExplain" label="审核说明" :label-width="formLabelWidth">
                <el-input v-model="applyForm.reviewExplain" :rows="8" type="textarea" placeholder="请输入审核说明" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import $bus from '../../bus'
import { EditFromData } from '../../api/apply/poor/type';
import { ElMessage } from 'element-plus'
let $emit = defineEmits(['EditApplyInfo'])
defineProps(['paginationData'])
let applyForms = ref()
let formLabelWidth = ref<String>('120px')
let dialogFormVisible = ref<Boolean>(false)
const value = ref('')

const options = [
    {
        value: '0',
        label: '待审核',
    },
    {
        value: '1',
        label: '审核通过',
    },
    {
        value: '2',
        label: '审核不通过',
    }
]

// 收集对话框中的数据
let applyForm = reactive<EditFromData>({
    reviewStatus: '',
    reviewExplain: ''
})


onMounted(() => {
    $bus.on('showDialog', (obj: any) => {
        //  清空上一次文本框中的内容
        applyForm.reviewStatus = ''
        applyForm.reviewExplain = ''
        // 显示对话框
        dialogFormVisible.value = obj.isShow

        // 赋值
        if (obj.row) {
            value.value = String(obj.row.reviewStatus)
            Object.assign(applyForm, obj.row)
        }

        applyForms.value?.clearValidate('reviewStatus')
        applyForms.value?.clearValidate('reviewExplain')
    })
})

// 表单校验
const rules = {
    reviewStatus: [{ required: true, message: '审核状态不能为空', trigger: 'blur' }],
    reviewExplain: [{ required: true, message: '审核说明不能为空', trigger: 'blur' }]
}

// 对话框确认按钮回调
const submit = async () => {
    await applyForms.value.validate();
    // 表单校验通过
    if (value.value === '1') {
        applyForm.reviewStatus = 1
    } else if (value.value === '2') {
        applyForm.reviewStatus = 2
    } else {
        ElMessage.warning('审核状态不能为待审核')
        return
    }
    $emit('EditApplyInfo', applyForm)
    // 关闭对话框
    dialogFormVisible.value = false
}

</script>

<style lang="scss" scoped>
.el-form {
    padding: 20px 30px;
}
</style>